<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Registration</title>
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="resources/css/datepicker.css" rel="stylesheet">
<link href="resources/css/bootstrap-timepicker.min.css" rel="stylesheet">
<style type="text/css">
	.cus_row {
		-moz-box-sizing: border-box;
		float:left;
		min-height: 1px;
		padding-right: 15px;
		position: relative;
	}
</style>

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"> 
    	<a class="btn btn-navbar" style="margin-top: 25px;" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
      	</a> <a class="brand" style="text-align:center;" href="home.html"><img src="resources/icons/share_ride.png" style="max-width:55px; padding-right:15px"/>Carpooling.lk</a>

        <div class="nav-collapse collapse">
            <ul class="nav navbar-nav">
              <li style="text-align:center; float:left">
                <a href="advertise.php"><img src="resources/icons/speaker.png" style="max-width:40px; min-width: 20px;"/><br />Advertise</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="publish.html"><img src="resources/icons/publish.png" style="max-width:40px; min-width: 20px;"/><br />Publish</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="#notifPanel" data-toggle="modal"><img src="resources/icons/notification.png" style="max-width:40px; min-width: 20px;"/><br />Notifications</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="my_posts.html"><img src="resources/icons/my_posts.png" style="max-width:40px; min-width: 20px;"/><br />My Posts</a>
              </li>
              <li class="active" style="text-align:center; float:left">
                <a href="user_details.html"><img src="resources/icons/user_details.png" style="max-width:40px; min-width: 20px;"/><br />User Details</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="preferences.php"><img src="resources/icons/preferences.png" style="max-width:40px; min-width: 20px;"/><br />Preferences</a>
              </li>
              <li style="text-align:center; float:left">
                <a data-toggle="collapse" data-target="#srch_panel"><img src="resources/icons/search.png" style="max-width:40px; min-width: 20px;"/><br />Search</a>
              </li>
            </ul>
        </div>

        <!-- Search Panel -->
        <div id="includedSrchPanel" class="cus_row" style="width:100%"></div>
    </div>
  </div>
</div>

<div style="height:85px"></div>

<div class="container">


 <form class="form-actions">
        <fieldset>
          <legend>Register</legend>
          <div class="control-group">
            <label class="control-label" for="txt_usrname">Username</label>
            <input id="txt_usrname" type="text" class="input-xlarge" placeholder="Email address">
            <label class="control-label" for="txt_pwd">Password</label>
            <input id="txt_pwd" type="password" class="input-medium" placeholder="Password">
            <input type="password" class="input-medium" placeholder="Re-type Password">
            <label class="control-label" for="txt_usrtype">User Type</label>
             <div style="width:100%;">
                <div class="cus_row" style="width:20%; padding-top:10px; min-width:100px;">
                    <label class="radio">
                    	<input type="radio" name="usrTypeRadio" id="usr_type1" value="Personal" checked>
                        Personal
                    </label>
                </div>

                <div class="cus_row" style="width:20%; padding-top:10px; min-width:100px;">
                    <label class="radio">
                        <input type="radio" name="usrTypeRadio" id="usr_type2" value="Corporate">
                        Corporate
                    </label>
                </div>

                <div class="cus_row" style="width:60%; padding-top:10px;">
                </div>
              </div>
            <label class="control-label cus_row"  style="width:100%; padding-top:10px">Name</label>
            <div style="width:100%;">
                <div class="cus_row" style="width:30%; padding-top:10px; min-width:165px;">
                    <input id="txt_firstname" type="text" class="input-medium" placeholder="First Name">
                </div>
                <div class="cus_row" style="width:70%; padding-top:10px; min-width:165px;">
                    <input  id="txt_lastname" type="text" class="input-medium" placeholder="Last Name">
                </div>
            </div>

            <div style="width:100%;">
                <div class="cus_row" style="width:30%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="gender">Gender</label>
                    <div class="controls">
                        <select id="gender" style="width:auto">
                            <option>Male</option>
                            <option>Female</option>
                        </select>
                    </div>
                </div>
                <div class="cus_row" style="width:70%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="prof">Profession</label>
                    <div class="controls">
                        <select id="prof" style="width:auto">
                        	<option>Clerk</option>
                            <option>Doctor</option>
                            <option>Engineer</option>
                            <option>Lawyer</option>
                            <option>Manager</option>
                            <option>Other Executive</option>
                            <option>Teacher</option>
                        </select>
                    </div>
                </div>
            </div>

            <div style="width:100%;">
                <div class="cus_row" style="width:30%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="dob">Date Of Birth</label>
                    <input id="dob" type="text" value="26/08/2013" data-date-format="dd/mm/yyyy" class="datepicker input-medium" style="width:auto">
                </div>
                <div class="cus_row" style="width:70%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="txt_mobile">Mobile Number</label>
                    <input id="txt_mobile" type="text" class="input-medium" placeholder="0094-">
                </div>
            </div>

          <div class="form-actions cus_row" style="width:100%; padding-left: 0px;">
            <button type="submit" class="btn btn-large btn-primary">Save</button>
          </div>
        </fieldset>
    </form>

    <!-- Notification Panel -->
    <div id="includedNotifPanel"></div>

  <div style="height:30px"></div>
  
  <!-- Site footer -->
  <div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="navbar-inner"> <a class="brand" href="#" style="padding-left:7%">&copy; Carpooling.lk 2013</a> </div>
  </div>
</div>

<!-- JAVASCRIPT INCLUDES -->
<script type="text/javascript" src="Resources fro collapsible menu/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="Resources fro collapsible menu/bootstrap-timepicker.min.js"></script>

<!-- JAVASCRIPT INCLUDES -->
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript">
	$('#dob').datepicker();
	//Include Notification panel
	$(function(){
      $("#includedNotifPanel").load("notification_panel.html"); 
    });

	//Include Search panel
	$(function(){
      $("#includedSrchPanel").load("search_panel.html"); 
    });
</script>

</body>
</html>

